<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>改变HTML的值</title>
</head>
<body>
<!--元素节点.innerText = new text content	改变元素的 inner Text。-->
<!--元素节点.innerHTML = new html content	改变元素的 inner HTML。-->
<!--元素节点.属性 = new value	改变 HTML 元素的属性值。-->
<!--元素节点.setAttribute(attribute, value)	改变 HTML 元素的属性值。-->
<!--元素节点.style.样式 = new style	改变 HTML 元素的行内样式值。-->
<button id="btn">我是按钮</button>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>
<a id="a" href="">打开百度，你就知道！</a>
<a id="b" href="">打开百度，你就知道！</a>

<script>
    const btn = document.getElementById("btn");
    btn.innerText = "我是JavaScript的按钮";
    console.log(btn);

    const box = document.getElementById("box");
    box.innerHTML = "<h1>我是Box</h1>";
    console.log(box)

    box.style.background = "green";
    console.log(box);

    const a = document.getElementById("a");
    a.href="https://www.baidu.com";
    console.log(a);

    const b = document.getElementById("b");
    a.setAttribute("href", "https://www.baidu.com");
    console.log(b);
</script>
</body>
</html>